<template>
    <div id="Statistical_Into">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>推广文案</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <template>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="标题" name="first"><Mytitle v-if="activeName=='first'"></Mytitle></el-tab-pane>
                    <el-tab-pane label="封面" name="second"><cover v-if="activeName=='second'"></cover></el-tab-pane>
                    <el-tab-pane label="原文引导模板" name="third"><dropdown v-if="activeName=='third'"></dropdown></el-tab-pane>
                </el-tabs>
            </template>
            <!--            <el-form ref="form" label-width="80px" :inline="true" size="small" class="admin_from">-->
            <!--                <el-form-item>-->
            <!--                    <el-button type="primary" size="small" @click="addRecharge">添加文案</el-button>-->
            <!--                </el-form-item>-->
            <!--            </el-form>-->
            <!--            <el-table-->
            <!--                    size="small"-->
            <!--                    :data="tableData"-->
            <!--                    border-->
            <!--                    style="width: 100%">-->
            <!--                <el-table-column-->
            <!--                        type="index"-->
            <!--                        label="#"-->
            <!--                        width="50">-->
            <!--                </el-table-column>-->
            <!--                <el-table-column-->
            <!--                        prop="issex"-->
            <!--                        label="类型">-->
            <!--                    <template slot-scope="scope">-->
            <!--                        <span v-if="scope.row.type=='title'">标题</span>-->
            <!--                        <span v-if="scope.row.type=='cover'">封面</span>-->
            <!--                        <span v-if="scope.row.type=='dropdown'">原文引导模板</span>-->
            <!--                    </template>-->
            <!--                </el-table-column>-->
            <!--                <el-table-column-->
            <!--                        prop="coverpic"-->
            <!--                        label="内容">-->
            <!--                    <template slot-scope="scope">-->
            <!--                        <span v-if="scope.row.type=='title'">{{scope.row.content}}</span>-->
            <!--                        <img :src="scope.row.content" width="60" alt="" v-else>-->
            <!--                    </template>-->
            <!--                </el-table-column>-->
            <!--                <el-table-column-->
            <!--                        prop="address"-->
            <!--                        label="操作"-->
            <!--                        width="200">-->
            <!--                    <template slot-scope="scope">-->
            <!--                        <p style="text-align: center">-->
            <!--                            <el-button type="primary" plain size="small" @click="edit(scope.row.id)">修改</el-button>-->
            <!--                            <el-button type="warning" plain size="small" @click="remove(scope.row.id)">删除</el-button>-->
            <!--                        </p>-->
            <!--                    </template>-->
            <!--                </el-table-column>-->
            <!--            </el-table>-->
            <!--            <div class="el-pagination">-->
            <!--                <el-pagination-->
            <!--                        background-->
            <!--                        @size-change="changeSize"-->
            <!--                        @current-change="changeCurrent"-->
            <!--                        :current-page="params.pagenum"-->
            <!--                        :page-sizes="[10, 20, 30, 40]"-->
            <!--                        :page-size="params.pagesize"-->
            <!--                        :total="params.totals"-->
            <!--                        :layout="this.$store.state.paginationLayout">-->
            <!--                </el-pagination>-->
            <!--            </div>-->
        </el-card>
        <!--            新增或编辑-->
        <el-dialog :title="fromTitle" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :model="dataForm" :label-width="this.$store.state.setLabelWidth" size="small">
                        <el-form-item label="类型"
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-select v-model="dataForm.type" placeholder="类型"
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="标题" value="title"></el-option>
                                <el-option label="封面" value="cover"></el-option>
                                <el-option label="原文引导模板" value="dropdown"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="内容" v-if="dataForm.type=='title'">
                            <el-input v-model="dataForm.content"></el-input>
                        </el-form-item>
                        <el-form-item label="内容" v-if="dataForm.type=='cover'||dataForm.type=='dropdown'">
                            <el-upload
                                    class="avatar-uploader"
                                    action="upDataUrl"
                                    :show-file-list="false"
                                    :http-request="myUpload"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="dataForm.content" :src="dataForm.content" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
  import {uploadimg} from '../../utils/common'
  import Mytitle from '../../components/official_extension/title'
  import cover from '../../components/official_extension/cover'
  import dropdown from '../../components/official_extension/dropdown'

  export default {
    name: "Statistical_Into",
    components: {Mytitle,cover,dropdown},
    data() {
      return {
        activeName: 'first',
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0,
        },
        tableData: [],
        fromTitle: '',
        visible: false,
        btype: 2,
        title: '',
        author: '',
        formTitle: '',
        bookId: '',
        dataForm: {
          content: '',
          type: '',
        },
      }
    },
    created() {
      // this.getList();
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.activeName = tab.name;
      },
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
        };
        this.$axios.get("admin/material", data).then((res) => {
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList();
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList();
      },
      addRecharge() {
        this.formTitle = '新增';
        this.id = '';
        this.dataForm = {
          content: '',
          type: '',
        };
        this.visible = true;
      },
      edit(id) {
        this.id = id;
        this.formTitle = '编辑';
        this.$axios.get('admin/material/' + id).then((res) => {
          this.dataForm = res.data;
          this.visible = true;
        });
      },
      // 确认提交添加或编辑用户
      dialogAffirm() {
        if (this.id) {
          this.$axios.put('admin/material/' + this.id, this.dataForm).then((res) => {
            this.$message.success('成功');
            this.getList();
            this.visible = false;
          });
        } else {
          // 添加
          this.$axios.post('/admin/material', this.dataForm).then((res) => {
            this.$message.success('成功');
            this.getList();
            this.visible = false;
          });
        }
      },
      remove(id) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.del('admin/material/' + id, '').then((res) => {
            this.$message.success('删除成功!');
            this.getList();
          });
        }).catch(() => {

        });
      },
      search() {
        this.params.pagenum = 1;
        this.getList();
      },
      beforeAvatarUpload(file) {
        var suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
        let arr = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'pdf', 'JPG', 'JPEG', 'PNG', 'GIF', 'BMP', 'PDF']
        if (arr.indexOf(suffix) === -1) {
          this.$message.error('上传图片格式有误');
          return false
        }
      },
      // 上传文件
      myUpload(content) {
        uploadimg(content).then(res => {
          this.dataForm.content = res;
        })
      },
      closeDatails(data) {
        this.visible = data;
        this.getList();
      }
    }
  }
</script>

<style scoped>

</style>